---
layout: blog
title: Donate
permalink: /donate/
---
    <link href="{{ "/static/slick/slick.css" | prepend: site.baseurl }}" rel="stylesheet">
    <link href="{{ "/static/slick/slick-theme.css" | prepend: site.baseurl }}" rel="stylesheet">
<div class="row">
    <div class="col-sm-8 col-sm-offset-2 text-center">
        <div class="navy-line"></div>
        <h1>Donate Jalpc</h1>
        <h3>If you like this theme and want to support it, just donate it. We can make Jalpc better!</h3>
    </div>
</div>

<div class="wrapper wrapper-content animated pulse">
    <div class="row">
        <a href="http://paypal.me/jarrekk" target="_blank" style="height: 35px;display: block;text-align: center;"><h2><i class="fa fa-paypal"></i>Paypal</h2></a>
        <div class="col-sm-8 col-sm-offset-2">
            <h2 class="text-center m">Alipay</h2>
            <div class="slick">
                {% for alipay in site.data.donation.alipay %}
                <div>
                    <div class="ibox-content">
                        <img src="{{ alipay.name | prepend: '/static/assets/img/donate/' | prepend : site.baseurl }}" width="100%">
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
            <h2 class="text-center m">WeChat Pay</h2>
            <div class="slick">
                {% for wechat in site.data.donation.wechat_pay %}
                <div>
                    <div class="ibox-content">
                        <img src="{{ wechat.name | prepend: '/static/assets/img/donate/' | prepend : site.baseurl }}" width="100%">
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="row">
        {% for donation in site.data.donation.donationlist %}
        {% assign loopindex = forloop.index | modulo: 2 %}
        <div class="col-sm-4 {% if loopindex == 1 %}col-sm-offset-2{% endif %}">
            <div class="contact-box" style="height: 200px;">
                <div class="col-sm-4">
                    <div class="text-center">
                        <img alt="image" class="img-circle m-t-xs img-responsive {{ donation.github }}" src="{{ "/static/assets/img/default.jpg" | prepend: site.baseurl }}">
                        <div class="m-t-xs font-bold">{{ donation.name }}</div>
                        <p><i class="fa fa-{{ donation.type }}"></i> {{ donation.value }}</p>
                    </div>
                </div>
                <div class="col-sm-8">
                    <p><i class="fa fa-user"></i> {{ donation.account }}</p>
                    <p class="{{ donation.github }}"><i class="fa fa-map-marker"></i> Earth</p>
                    {% if donation.website %}
                    <p><i class="fa fa-globe"></i> <a target="blank" href="{{ donation.website }}">Website</a></p>
                    {% endif %}
                    {% if donation.github %}
                    <p><i class="fa fa-github"></i> <a class="github_username {{ donation.github }}" target="blank" href="#">{{ donation.github }}</a></p>
                    {% endif %}
                    <p><i class="fa fa-calendar"></i> {{ donation.date | date: "%-d %b %Y" }}</p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<!-- slick carousel-->
<script src="{{ "/static/slick/slick.min.js" | prepend: site.baseurl }}"></script>

<style>
    .slick .ibox-content {
        margin: 0 10px;
    }
</style>

<script>
    $(document).ready(function(){
        donate_github = $('.github_username');
        for (var i = 0; i < donate_github.length; i++) {
            $.ajax({
            type: "GET",
            url: "https://api.github.com/users/" + donate_github[i].text,
            tryCount : 0,
            retryLimit : 3,
            async: true,
            dataType: "json",
            success: function (data) {
                $("img." + data.login).attr("src", data.avatar_url);
                $("a." + data.login).attr("href", data.html_url);
                if (data.location !== null) {
                    $("p." + data.login).html("<i class=\"fa fa-map-marker\"></i> " + data.location);
                }
            }
        });
        };
        $('.slick').slick({
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 1,
            centerMode: true,
            responsive: [
                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 3,
                        infinite: true,
                        dots: true
                    }
                },
                {
                    breakpoint: 600,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 2
                    }
                },
                {
                    breakpoint: 600,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }
            ]
        });
    });
</script>
